<template>
  <div>
    <!-- 课上案例 -->
    <!-- bind指令 -->
    <img :src='imgUrl' alt="">
    <a :href="url">百度一下,你就知道</a>

    <!-- on事件绑定 -->
    <p>{{num}}</p>
    <button @click="add(5)">+5</button>
    <br><br>
    <!-- 获取事件对象 -->
    <a href="https://www.baidu.com/" @click="goto">获取事件对象无参数</a>
    <br>
    <a href="https://www.baidu.com/" @click="goto1(1,$event)">获取事件对象有参数</a>
    <br><br>
    <!-- 事件修饰符 -->
    <div @click="f1">
      <button @click.stop="f2">点我一下</button>
      <a href="https://www.baidu.com/" @click.prevent>事件修饰符</a>
    </div>
     <br><br>

     <!-- 按键修饰符 -->
     <input type="text" @keyup.enter="keyup">
     <input type="text" @keyup.esc="keyesc">

     <!-- 翻转数组 -->
     <p>{{word}}</p>
     <button @click='reverse'>翻转数组</button>
  </div>
</template>

<script>
export default {
data(){
  return{
    url:'https://www.baidu.com/',
    imgUrl:'https://www.baidu.com/img/540x258_2179d1243e6c5320a8dcbecd834a025d.png',
    num:0,
    inputtxt:'',
    word:'Hello word'
  }
},
methods:{
  add(n){
    this.num=this.num+n
  },
  goto(e){
    e.preventDefault()
  },
  goto1(a,e){
    e.preventDefault()
  },
  f1(){
    console.log('f1');
  },
  f2(){
    console.log('f2');
  },
  keyup(){
    console.log(12);
  },
  keyesc(){
    console.log('keyesc');
  },
  reverse(){
    this.word=this.word.split('').reverse().join('')
  }

}

}
</script>

<style>

</style>